<template>
  <el-config-provider :locale="localeLang()">
    00000
    <el-container :style="{ height: 'calc(100vh)' }">
      <el-aside :width="state.menusWidth" v-if="!state.path">
        <DynamicMenus ref="dynamicMenusRef" :isCollapse="state.isCollapse" />
      </el-aside>
      <el-container :width="state.rightWidth">
        <el-header v-if="!state.path">
          <DynamicHead ref="DynamicHeadRef" @click="callBack" />
        </el-header>
        <DynamicTabs
          v-if="!state.path"
          :name="state.name"
          ref="dynamicTabsRef"
        />
        <el-main class="tabs-view-content">
          <router-view #="{ Component }">
            <component @appClick="callBack" :is="Component" />
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-config-provider>
</template>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "@/store/baseData/index";
import { Storage } from "@/utils/storage";
import { ACCESS_TOKEN_KEY } from "@/utils/enums/cache-enum";
import { transformI18n } from "@/i18n/i18n";
import zhLocale from "element-plus/lib/locale/lang/zh-cn";

import DynamicMenus from "@/components/layout/menus/dynamic-menus.vue";
import DynamicHead from "@/components/layout/head/dynamic-head.vue";
import DynamicTabs from "@/components/layout/tabs/dynamic-tabs.vue";

const dynamicMenusRef = ref(DynamicMenus);
const DynamicHeadRef = ref(DynamicHead);
const dynamicTabsRef = ref(DynamicTabs);

const route = useRoute();
const store = useStore();

const state = reactive({
  path: true,
  isCollapse: false,
  name: null as any,
  menusWidth: "201px",
  rightWidth: "calc(100% - 201px)",
});

watch(
  () => route.path,
  (path) => {
    state.name = "";
    //console.log('currentRoute', path)
    let token = Storage.get(ACCESS_TOKEN_KEY);
    if (!path && !token) {
      return;
    }
    state.path = path === "/" || !path || path === "/login" || !token;
  }
);
const callBack = (data: any) => {
  switch (data.type || "") {
    case "closeTab":
      state.name = data.data;
      break;
    case "isCollapse":
      state.isCollapse = data.data;
      if (state.isCollapse) {
        state.menusWidth = "64px";
        state.rightWidth = "calc(100% - " + state.menusWidth + ")";
      } else {
        state.menusWidth = "201px";
        state.rightWidth = "calc(100% - " + state.menusWidth + ")";
      }
      break;
  }
};

const localeLang = () => {
  return zhLocale;
};

if (Storage.get(ACCESS_TOKEN_KEY)) {
  // 防止刷新页面后动态路由消失
  store.addDynamicRoute();
}

watchEffect(() => {
  if (route.meta?.title) {
    const title = document.title?.split(" - ")[0];
    document.title =
      transformI18n(title) + " - " + transformI18n(route.meta.title as string);
  }
});
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
